<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>收退款</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<style type="text/css">
			body {
				background-color: #f3f3f5;
			}
			.tab_box {
				width: 7.5rem;
				min-height: 9.27rem;
			}
			.van_list {
				background-color: #fff;
				padding: 0 0.3125rem;
			}
			.list_item {
				height: 0.96rem;
				padding: 0.25rem 0 0.25rem 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #ebedf0;
			}
			.list_item:last-child {
				border-bottom: none;
			}
			.btn {
				width: 5.21rem;
				margin: 1.33rem 1.15rem;
				border-radius: 1.42rem;
				background-color: #e22e30;
				color: #fff;
				font-size: 0.41rem;
			}
			.van-empty__image,
			.van-empty__image > img {
				height: 4.17rem;
				width: 4.17rem;
			}
			.van-empty__description {
				margin-top: 14px;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<van-tabs v-model:active="active" @click="onClick">
					<van-tab
						v-for="(item,index) in tabs"
						class="tab"
						:title="item.title"
						:key="index"
					>
						<div class="tab_box">
							<div
								style="
									height: 0.92rem;
									line-height: 0.92rem;
									margin-left: 0.31rem;
									font-size: 0.33rem;
								"
								@click="handleSearchPop"
							>
								<span style="margin-right: 0.17rem">{{searchDate}}</span>
								<van-icon name="arrow-down" />
							</div>
							<van-popup
								v-model:show="showDate"
								position="bottom"
								:style="{ height: '45%' }"
							>
								<van-datetime-picker
									v-model="currentDate"
									type="year-month"
									:min-date="minDate"
									:max-date="maxDate"
									:formatter="formatter"
									@cancel="showDate = false"
									@confirm="onConfirmDate"
								/>
							</van-popup>
							<van-list
								class="van_list"
								v-model="loading"
								:finished="finished"
								@load="onLoad"
							>
								<div class="list_item" v-for="item in flow">
									<div class="item_left">
										<div style="margin-bottom: 0.125rem">
											<span style="font-size: 0.33rem; margin-right: 0.33rem"
												>{{item.flowPatientName}}</span
											>
											<span style="font-size: 0.29rem"
												>{{item.flowPatientMobile}}</span
											>
										</div>
										<p style="font-size: 0.25rem; color: #999">
											{{item.createTime}}
										</p>
									</div>
									<div class="item_right">
										<p
											style="
												font-size: 0.33rem;
												color: #e22e30;
												margin-bottom: 0.125rem;
												text-align: right;
											"
										>
											￥{{item.flowPrice/100}}
										</p>
										<p
											style="font-size: 0.25rem; color: #999; text-align: right"
										>
											{{item.flowChannel}}
										</p>
									</div>
								</div>
							</van-list>
							<van-empty
								v-if="flow.length == 0"
								image="img/empty.png"
								:description="active==0?'暂无收款记录':'暂无退款记录'"
							></van-empty>
						</div>
						<van-button class="btn" @click="handleClick"
							>新建{{active==0?'收款':'退款'}}记录</van-button
						>
					</van-tab>
				</van-tabs>
			</div>
			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					tabs: [
						{
							title: '收款',
							type: '1',
						},
						{
							title: '退款',
							type: '2',
						},
					],
					active: 0,
					minDate: new Date(1970, 0, 1),
					maxDate: new Date(),
					currentDate: new Date(),
					searchDate: '',
					loading: false,
					finished: false,
					total: 0,
					flow: [],
					pageNum: 1,
					orgCode: '',
					showDate: false,
				}
			},
			created() {
				this.doctorId = url('?id')
				this.type = url('?type')
				this.orgCode = url('?orgCode')
				if (this.type == 2) {
					this.active = 1
				} else {
					this.active = 0
				}
				const date = new Date()
				this.searchDate =
					date.getFullYear() +
					'-' +
					(date.getMonth() + 1 < 9
						? '0' + (date.getMonth() + 1)
						: date.getMonth() + 1)
				this.getFlowList()
			},
			methods: {
				init() {
					this.flow = []
					this.pageNum = 1
					this.loading = false
					this.finished = false
					this.currentDate = new Date()
					this.searchDate =
						new Date().getFullYear() +
						'-' +
						(new Date().getMonth() + 1 < 9
							? '0' + (new Date().getMonth() + 1)
							: new Date().getMonth() + 1)
				},
				onClick(item) {
					this.init()
					this.getFlowList()
					console.log(item, this.active)
				},
				getFlowList() {
					postAction(spliceUrl('/payrefund/page'), {
						doctorId: this.doctorId,
						orgCode: this.orgCode,
						flowType: +this.active + 1,
						month: this.searchDate,
						pageNum: this.pageNum,
						pageSize: 10,
					}).then(res => {
						res = res.data
						if (res.success) {
							this.flow = [...this.flow, ...res.result.records]
							this.total = res.result.total
							this.pageNum++
							if (this.flow.length >= this.total) {
								this.finished = true
							}
						}
					})
				},
				handleSearchPop() {
					this.showDate = true
				},
				formatter(type, val) {
					if (type === 'year') {
						return `${val}年`
					} else if (type === 'month') {
						return `${val}月`
					}
					return val
				},
				onConfirmDate(item) {
					this.init()
					this.searchDate =
						new Date(item).getFullYear() +
						'-' +
						(new Date(item).getMonth() + 1 < 9
							? '0' + (new Date(item).getMonth() + 1)
							: new Date(item).getMonth() + 1)
					this.getFlowList()
					this.showDate = false
				},
				onload() {
					this.getFlowList()
				},
				handleClick() {
					sessionStorage.setItem(
						'form',
						JSON.stringify({ flowType: this.tabs[this.active].type })
					)
					window.location.href =
						'./addFlow.html?id=' + this.doctorId + '&orgCode=' + this.orgCode
				},
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
